<template>
  <div>
    <!-- 面包屑 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">积分商城</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加幻灯片 -->
    <div class="x_button">
      <el-row>
        <el-button @click="add()">添加新积分商品分类</el-button>
      </el-row>
    </div>
    <!-- 顺序表格 -->
    <div class="x_sequence" style="width:1000px;margin-left:30px;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="ID" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="显示顺序" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.sort }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.title }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.appear }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
      <!-- 添加轮播 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible">
          <AddCate @setShow="setShow"></AddCate>
      </el-dialog>
      <!-- 修改轮播 -->
      <el-dialog title="修改分类" :visible.sync="dialogVisible1">
        <EditCate @setAppear="setAppear" :editId="editId"></EditCate>
      </el-dialog>
  </div>
</template>

<script>
import { getCateList,delCateList } from '../../../api'
import AddCate from './addCate.vue'
import EditCate from './editCate.vue'
export default {
  components: {
    AddCate,
    EditCate
},
  data() {
    return {
      // 表格
      tableData: [],
      // 遮罩层
      dialogVisible: false,
      dialogVisible1: false,
      editId:0
    }
  },
  created() {
    getCateList().then((res) => {
      console.log(res)
       this.tableData = res.data
    })
  },
  methods: {
    // 封装
    encap() {
      getCateList().then((res) => {
        console.log(res)
        this.tableData = res.data
      })
    },
    add() {
      this.dialogVisible = true
    },
    // 模态框按钮显示隐藏
      // 添加
      setShow(e){
        this.dialogVisible = e
        this.encap()
      },
      // 编辑
      setAppear(e) {
        this.dialogVisible1 = true
        this.encap()
      },

    // 表格
    handleEdit(index, row) {
      // console.log(index, row)
      this.dialogVisible1 = true
      this.editId = row.id
    },
    handleDelete(index, row) {
      // console.log(index, row)
      delCateList({id: row.id}).then(res => {
        console.log(res)
        this.encap()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.x_button {
  margin: 50px 30px;
}
</style>